<template>
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-col">
                <h4 class="footer-title">
                    <el-icon class="title-icon"><Star /></el-icon>
                    温馨养老院
                </h4>
                <p class="footer-desc">
                    关怀每一位长者，为他们提供舒适、温暖、有尊严的养老生活环境和专业照护服务。
                </p>
                <div class="social">
                    <el-icon class="social-icon"><ChatLineRound /></el-icon>
                    <el-icon class="social-icon"><Phone /></el-icon>
                </div>
            </div>

            <div class="footer-col">
                <h4 class="footer-title">快速导航</h4>
                <ul class="footer-list">
                    <li class="footer-item"><a href="#">首页</a></li>
                    <li class="footer-item"><a href="#">关于我们</a></li>
                    <li class="footer-item"><a href="#">服务项目</a></li>
                    <li class="footer-item"><a href="#">留言板</a></li>
                </ul>
            </div>

            <div class="footer-col">
                <h4 class="footer-title">服务项目</h4>
                <ul class="footer-list">
                    <li class="footer-item">生活照料</li>
                    <li class="footer-item">医疗护理</li>
                    <li class="footer-item">文娱活动</li>
                    <li class="footer-item">营养膳食</li>
                </ul>
            </div>

            <div class="footer-col">
                <h4 class="footer-title">联系方式</h4>
                <ul class="footer-list">
                    <li class="footer-item">
                        <el-icon class="item-icon"><Location /></el-icon>
                        <span>苏州市高新区马运路123号（示例地址）</span>
                    </li>
                    <li class="footer-item">
                        <el-icon class="item-icon"><Phone /></el-icon>
                        <span>+86 0512-1234-5678</span>
                    </li>
                    <li class="footer-item">
                        <el-icon class="item-icon"><Message /></el-icon>
                        <span>info@warmeldercare.com</span>
                    </li>
                    <li class="footer-item">
                        <el-icon class="item-icon"><Clock /></el-icon>
                        <span>7×24 小时服务</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="copyright">© 2025 温馨养老院. 保留所有权利。</div>
        </div>
    </footer>
</template>

<script setup>
    import { Star, ChatLineRound, Phone, Location, Message, Clock } from "@element-plus/icons-vue";
</script>

<style scoped>
    /* 组件内局部主题，仅供 Footer 使用 */
    .footer {
        --bg: #121a22;
        --text: #cfd6df;
        --muted: #9fb0bf;
        --border: #2a3642;
        --accent: #4a7b26; /* 绿主题 */
        background: var(--bg);
        color: var(--text);
        height: 220px; /* 固定高度 */
        box-sizing: border-box;
        overflow: hidden;
    }

    .footer-container {
        max-width: 1080px;
        margin: 0 auto;
        padding: 48px 20px 24px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .footer-col {
        min-width: 0;
    }

    .footer-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 700;
        color: #e5e7eb;
        margin: 0 0 14px;
    }
    .title-icon {
        color: var(--accent);
    }

    .footer-desc {
        font-size: 14px;
        line-height: 1.8;
        color: var(--muted);
        margin: 0 0 12px;
    }

    .footer-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: var(--text);
        padding: 6px 0;
    }
    .footer-item a {
        color: var(--text);
        text-decoration: none;
    }
    .footer-item a:hover {
        color: #ffffff;
    }
    .item-icon {
        color: var(--accent);
    }

    .social {
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }
    .social-icon {
        color: var(--accent);
    }

    .footer-bottom {
        border-top: 1px solid var(--border);
        margin-top: 16px;
    }
    .copyright {
        max-width: 1080px;
        margin: 0 auto;
        padding: 16px 20px 32px;
        font-size: 13px;
        color: var(--muted);
        text-align: left;
    }

    /* 响应式 */
    @media (max-width: 1024px) {
        .footer-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 640px) {
        .footer-container {
            grid-template-columns: 1fr;
        }
        .copyright {
            text-align: center;
        }
    }
</style>
